<template>
	<div class="floAttr">
		<el-tabs size="small" defaultActiveKey="flow-attr" v-model="that.activeKey">
			<el-tab-pane :label="$t('liu-cheng-shu-xing')" name="flow-attr" disabled>
				<el-form layout="horizontal">
					<el-form-item :label="$t('liu-cheng-id')">
						<el-input v-model="flowData.attr.id" disabled />
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane :label="$t('jie-dian-shu-xing')" disabled name="node-attr">
				<template v-if="that.currentSelect.type == 'start round mix'">
					<el-form layout="horizontal">
						<el-form-item :label="$t('lei-xing')">
							<el-tag color="purple">{{ that.currentSelect.type }}</el-tag>
						</el-form-item>
						<el-form-item label="id">
							<el-input v-model="that.currentSelect.id" disabled />
						</el-form-item>
						<el-form-item :label="$t('ming-cheng-0')">
							<el-input :placeholder="$t('qing-shu-ru-jie-dian-ming-cheng-0')" v-model="that.currentSelect.name" @change="nameChange" />
						</el-form-item>
					</el-form>
				</template>
				<template v-if="that.currentSelect.type == 'end round'">
					<el-form layout="horizontal">
						<el-form-item :label="$t('lei-xing')">
							<el-tag color="purple">{{ that.currentSelect.type }}</el-tag>
						</el-form-item>
						<el-form-item label="id">
							<el-input v-model="that.currentSelect.id" disabled />
						</el-form-item>
						<el-form-item :label="$t('ming-cheng-0')">
							<el-input :placeholder="$t('qing-shu-ru-jie-dian-ming-cheng-0')" v-model="that.currentSelect.name" @change="nameChange" />
						</el-form-item>
					</el-form>
				</template>
				<template v-if="that.currentSelect.type == 'node'">
					<el-form layout="horizontal">
						<el-form-item :label="$t('lei-xing')">
							<el-tag color="purple">{{ that.currentSelect.type }}</el-tag>
						</el-form-item>
						<el-form-item label="id">
							<el-input v-model="that.currentSelect.id" disabled />
						</el-form-item>
						<el-form-item :label="$t('ming-cheng-0')">
							<el-input :placeholder="$t('qing-shu-ru-jie-dian-ming-cheng-0')" v-model="that.currentSelect.name" @change="nameChange" />
						</el-form-item>
						<el-form-item :label="$t('bo-hui-lei-xing-0')">
							<el-select v-model="that.setInfo.nodeRejectType" @change="(e) => nodeRejectTypeChange(e)">
								<el-option v-for="(item, index) in that.nodeRejectType" :key="item.id" :value="item.id" :label="item.name">{{ item.name }}</el-option>
							</el-select>
						</el-form-item>
						<el-form-item :label="$t('hui-qian-fang-shi-0')">
							<el-select v-model="that.setInfo.nodeConfluenceType" @change="(e) => nodeConfluenceTypeChange(e)">
								<el-option v-for="(item, index) in that.nodeConfluenceType" :key="item.id" :value="item.id" :label="item.name">{{ item.name }}</el-option>
							</el-select>
						</el-form-item>
						<el-form-item :label="$t('hui-tiao-url-0')">
							<el-input v-model="that.setInfo.thirdPartyUrl" @change="linkThirdPartyUrlChange" />
						</el-form-item>
						<el-form-item :label="$t('zhi-hang-quan-xian-0')">
							<el-select :default-value="that.setInfo.nodeDesignate" v-model="that.setInfo.nodeDesignate" @change="(e) => nodeDesignateChange(e)">
								<el-option v-for="(item, index) in that.nodeDesignateData" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
							</el-select>
						</el-form-item>
						<el-form-item v-show="that.specialShow" v-if="that.setInfo.nodeDesignate == 'SPECIAL_USER'" :label="$t('zhi-ding-yong-hu-0')">
							<el-col :md="18" :sm="18">
								<el-input disabled="disabled" v-model="that.specialName" />
							</el-col>
							<el-col :md="6" :sm="6">
								<el-button icon="search" @click="setUser()" />
							</el-col>
						</el-form-item>
						<el-form-item v-show="that.specialShow" v-else :label="$t('zhi-ding-jiao-se-0')">
							<el-col :md="18" :sm="18">
								<el-input disabled="disabled" v-model="that.specialName" />
							</el-col>
							<el-col :md="6" :sm="6">
								<el-button icon="search" @click="setRole()" />
							</el-col>
						</el-form-item>
						<el-form-item :label="$t('dang-qian-bu-men-0')" v-if="that.setInfo.nodeDesignate == 'SPECIAL_ROLE'">
							<el-switch active-text="是" inactive-text="否" v-model="that.currentDepart" @change="currentDepartChange" /><!-- defaultChecked -->
						</el-form-item>
					</el-form>
				</template>
				<template v-else-if="that.currentSelect.type == 'fork'">
					<el-form layout="horizontal">
						<el-form-item :label="$t('lei-xing')">
							<el-tag color="purple">{{ that.currentSelect.type }}</el-tag>
						</el-form-item>
						<el-form-item label="id">
							<el-input :value="that.currentSelect.id" disabled />
						</el-form-item>
						<el-form-item :label="$t('ming-cheng-0')">
							<el-input :placeholder="$t('qing-shu-ru-jie-dian-ming-cheng-0')" v-model="that.currentSelect.name" @change="nameChange" />
						</el-form-item>
					</el-form>
				</template>
				<template v-else-if="that.currentSelect.type == 'join'">
					<el-form layout="horizontal">
						<el-form-item :label="$t('lei-xing')">
							<el-tag color="purple">{{ that.currentSelect.type }}</el-tag>
						</el-form-item>
						<el-form-item label="id">
							<el-input v-model="that.currentSelect.id" disabled />
						</el-form-item>
						<el-form-item :label="$t('ming-cheng-0')">
							<el-input :placeholder="$t('qing-shu-ru-jie-dian-ming-cheng-0')" v-model="that.currentSelect.name" @change="nameChange" />
						</el-form-item>
						<el-form-item :label="$t('bo-hui-lei-xing-0')">
							<el-select v-model="that.setInfo.nodeRejectType" @change="(e) => nodeRejectTypeChange(e)">
								<el-option v-for="(item, index) in that.nodeRejectType" :key="item.id" :value="item.id" :label="item.name">{{ item.name }}</el-option>
							</el-select>
						</el-form-item>
						<el-form-item :label="$t('hui-qian-fang-shi-0')">
							<el-select v-model="that.setInfo.nodeConfluenceType" @change="(e) => nodeConfluenceTypeChange(e)">
								<el-option v-for="(item, index) in that.nodeConfluenceType" :key="item.id" :value="item.id" :label="item.name">{{ item.name }}</el-option>
							</el-select>
						</el-form-item>
						<el-form-item :label="$t('hui-tiao-url-0')">
							<el-input :value="that.setInfo.thirdPartyUrl" @change="linkThirdPartyUrlChange" />
						</el-form-item>
						<el-form-item :label="$t('zhi-hang-quan-xian-0')">
							<el-select v-model="that.setInfo.nodeDesignate" @change="(e) => nodeDesignateChange(e)">
								<el-option v-for="(item, index) in that.nodeDesignateData" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
							</el-select>
						</el-form-item>
						<el-form-item v-if="that.setInfo.nodeDesignate == 'SPECIAL_USER'" :label="$t('zhi-ding-yong-hu-0')">
							<el-col :md="18" :sm="18">
								<el-input disabled="disabled" v-model="that.specialName" />
							</el-col>
							<el-col :md="6" :sm="6">
								<el-button icon="search" @click="setUser()" />
							</el-col>
						</el-form-item>
						<el-form-item v-show="that.specialShow" v-else :label="$t('zhi-ding-jiao-se-0')">
							<el-col :md="18" :sm="18">
								<el-input disabled="disabled" v-model="that.specialName" />
							</el-col>
							<el-col :md="6" :sm="6">
								<el-button icon="search" @click="setRole()" />
							</el-col>
						</el-form-item>
						<el-form-item :label="$t('dang-qian-bu-men-0')" v-if="that.setInfo.nodeDesignate == 'SPECIAL_ROLE'">
							<el-switch active-text="是" inactive-text="否" v-model="that.currentDepart" @change="currentDepartChange" />
						</el-form-item>
					</el-form>
				</template>
				<template v-else-if="that.currentSelect.type == 'x-lane' || that.currentSelect.type == 'y-lane'">
					<el-form layout="that.horizontal">
						<el-form-item :label="$t('lei-xing')">
							<el-tag color="purple">{{ that.currentSelect.type }}</el-tag>
						</el-form-item>
						<el-form-item :label="id">
							<el-input :value="that.currentSelect.id" disabled />
						</el-form-item>
						<el-form-item :label="$t('ming-cheng-0')">
							<el-input :placeholder="$t('qing-shu-ru-jie-dian-ming-cheng-0')" v-model="that.currentSelect.name" @change="nameChange" />
						</el-form-item>
					</el-form>
				</template>
			</el-tab-pane>
			<el-tab-pane :label="$t('lian-xian-shu-xing')" disabled name="link-attr">
				<el-form layout="horizontal">
					<el-form-item :label="id">
						<el-input v-model="that.currentSelect.id" disabled />
					</el-form-item>
					<el-form-item :label="$t('yuan-jie-dian')">
						<el-input v-model="that.currentSelect.sourceId" disabled />
					</el-form-item>
					<el-form-item :label="$t('mu-biao-jie-dian')">
						<el-input v-model="that.currentSelect.targetId" disabled />
					</el-form-item>
					<el-form-item :label="$t('wen-ben')">
						<el-input v-model="that.currentSelect.label" @change="linkLabelChange" />
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, defineProps, watch, defineEmits, nextTick, defineExpose } from 'vue';
// import jsplumb from 'jsplumb';

// import $ from 'jquery';
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';

const { proxy } = useCurrentInstance();
const $t = proxy.$t;

const prop = defineProps({
	flowData: {
		type: Object,
		default: false,
	},
	plumb: {
		type: Object,
		default: false,
	},
	select: {
		type: Object,
		default: false,
	},
	fieldNames: {
		type: Object,
		default: false,
	},
});

const emits = defineEmits(['updateSelect', 'updateFlowData', 'openUser', 'openRole']);
const that = reactive({
	currentSelect: prop.select,
	formItemLayout: {
		labelCol: { span: 6 },
		wrapperCol: { span: 16 },
	},
	compares: prop.select.compares,
	setInfo: prop.select.setInfo,
	specialName: '',
	currentDepart: false,
	operations: [
		{ id: '>', name: '>' },
		{ id: '<', name: '<' },
		{ id: '>=', name: '>=' },
		{ id: '<=', name: '<=' },
		{ id: '=', name: '=' },
		{ id: '!=', name: '!=' },
		{ id: 'in', name: 'in' },
		{ id: 'not in', name: 'not in' },
	],
	conditions: [
		{ id: 'and', name: $t('bing-qie') },
		{ id: 'or', name: $t('huo-zhe') },
	],
	specialShow: false,
	nodeDesignateData: [
		{ id: 'ALL_USER', name: $t('suo-you-yong-hu') },
		{ id: 'SPECIAL_USER', name: $t('zhi-ding-yong-hu-0') },
		{ id: 'SPECIAL_ROLE', name: $t('zhi-ding-jiao-se-0') },
		{ id: 'RUNTIME_SPECIAL_ROLE', name: $t('yun-hang-shi-zhi-ding-jiao-se') },
		{ id: 'RUNTIME_SPECIAL_USER', name: $t('yun-hang-shi-zhi-ding-yong-hu') },
	],
	nodeRejectType: [
		{ id: '0', name: $t('qian-yi-bu') },
		{ id: '1', name: $t('di-yi-bu') },
	],
	nodeConfluenceType: [
		{ id: 'all', name: $t('quan-bu-tong-guo') },
		{ id: 'one', name: $t('zhi-shao-you-yi-ge-tong-guo') },
	],
	activeKey: 'flow-attr',
	currentCompare: null,
});

const nodeNameChange = (e) => {
	that.currentSelect.name = e.target.value;
	that.currentSelect.setInfo.nodeName = that.currentSelect.name;
	that.currentSelect.setInfo.nodeCode = that.currentSelect.name;
};

const linkLabelChange = (e) => {
	let label = e.target.value;
	that.currentSelect.label = label;
	let conn = prop.plumb.getConnections({
		source: that.currentSelect.sourceId,
		target: that.currentSelect.targetId,
	})[0];
	if (label != '') {
		conn.setLabel({
			label: label,
			cssClass: 'linkLabel',
		});
	} else {
		let labelOverlay = conn.getLabelOverlay();
		if (labelOverlay) conn.removeOverlay(labelOverlay.id);
	}
};
const linkThirdPartyUrlChange = (e) => {
	let thirdPartyUrl = e.target.value;
	that.currentSelect.setInfo.thirdPartyUrl = thirdPartyUrl;
};
const nodeRejectTypeChange = (e) => {
	let nodeRejectType = e;
	that.setInfo.nodeRejectType = nodeRejectType;
	that.currentSelect.setInfo.nodeRejectType = nodeRejectType;
};
const nodeConfluenceTypeChange = (e) => {
	let nodeConfluenceType = e;
	that.setInfo.nodeConfluenceType = nodeConfluenceType;
	that.currentSelect.setInfo.nodeConfluenceType = nodeConfluenceType;
};
const addList = () => {
	let compares = that.compares;
	compares.push({
		fieldType: 'form',
		value: '',
		name: '',
		condition: 'and',
		valueName: '',
		operation: $t('key-1'),
	});
	that.compares = compares;
	that.currentSelect.compares = compares;
};
const subList = (e) => {
	let compares = that.compares;
	if (compares.length == 1) {
		compares = [
			{
				fieldType: 'form',
				value: '',
				name: '',
				condition: 'and',
				valueName: '',
				operation: $t('key-1'),
			},
		];
	} else {
		compares.splice(e, 1);
	}
	that.compares = compares;
	that.currentSelect.compares = compares;
};
const fieldNameChange = (i, e) => {
	const compares = that.compares;
	compares[i].fieldName = e;
	that.currentSelect.compares = compares;
};
const conditionChange = (i, e) => {
	const compares = that.compares;
	compares[i].condition = e;
	that.currentSelect.compares = compares;
};
const operationChange = (i, e) => {
	const compares = that.compares;
	compares[i].operation = e;
	that.currentSelect.compares = compares;
};
const alueChange = (i, e) => {
	const compares = that.compares;
	that.currentSelect.compares = compares;
};
//打开选择用户界面
const setUser = (value) => {
	if (that.currentSelect.type == 'link') {
		that.currentCompare = value;
		emits('openUser', null);
	} else {
		that.currentCompare = null;
		emits('openUser', that.setInfo.nodeDesignateData);
	}
};
//打开选择角色界面
const setRole = (value) => {
	if (that.currentSelect.type == 'link') {
		that.currentCompare = value;
		emits('openRole', null);
	} else {
		that.currentCompare = null;
		emits('openRole', that.setInfo.nodeDesignateData);
	}
};
const setFlowAttrForm = (record) => {
	if (!!record) {
		const nodeDesignateData = [];
		const nodeDesignateName = [];
		record.forEach((item) => {
			nodeDesignateData.push(item.id);
			nodeDesignateName.push(item.name);
		});
		if (that.currentSelect.type == 'link') {
			that.compares[that.currentCompare].value = nodeDesignateData.join(',');
			that.compares[that.currentCompare].valueName = nodeDesignateName.join(',');
			that.currentSelect.compares = that.compares;
		} else {
			that.setInfo.nodeDesignateData = nodeDesignateData;
			that.setInfo.nodeDesignateName = nodeDesignateName;
			that.currentSelect.setInfo.nodeDesignateName = nodeDesignateName;
			that.currentSelect.setInfo.nodeDesignateData = nodeDesignateData;
			if (nodeDesignateName.length > 0) {
				that.specialName = nodeDesignateName.join(',');
			}
		}
	}
};
const currentDepartChange = (e) => {
	let currentDepart = e;
	that.currentDepart = currentDepart;
	that.setInfo.currentDepart = currentDepart;
	that.currentSelect.setInfo = that.setInfo;
};
const nodeDesignateChange = (e) => {
	let nodeDesignate = e;
	that.setInfo.nodeDesignate = nodeDesignate;
	that.setInfo.nodeDesignateData = [];
	that.setInfo.nodeDesignateName = [];
	that.setInfo.currentDepart = false;
	that.currentDepart = false;
	that.specialName = '';
	if (nodeDesignate == 'SPECIAL_USER') {
		that.specialShow = true;
	} else if (nodeDesignate == 'SPECIAL_ROLE') {
		that.specialShow = true;
	} else {
		that.specialShow = false;
	}
	that.currentSelect.setInfo.nodeDesignate = nodeDesignate;
};

defineExpose({
	setFlowAttrForm,
});

watch(
	() => prop.select,
	(newVal) => {
		that.currentSelect = newVal;
		if (that.currentSelect.type == 'link') {
			that.activeKey = 'link-attr';
		} else if (!that.currentSelect.type) {
			that.activeKey = 'flow-attr';
		} else {
			that.activeKey = 'node-attr';
		}
	},
	{
		deep: true,
	}
);

watch(
	() => prop.select,
	(val) => {
		that.currentSelect = val;
		if (that.currentSelect.type == 'link') {
			that.activeKey = 'link-attr';
			if (!that.currentSelect.compares || that.currentSelect.compares.length == 0) {
				that.currentSelect.compares = [
					{
						fieldType: 'form',
						value: '',
						name: '',
						condition: 'and',
						valueName: '',
						operation: $t('key-1'),
					},
				];
			}
			that.compares = that.currentSelect.compares;
		} else if (!that.currentSelect.type) {
			that.activeKey = 'flow-attr';
		} else {
			that.activeKey = 'node-attr';
			if (that.currentSelect.type == 'node' || that.currentSelect.type == 'join') {
				if (!that.currentSelect.setInfo) {
					that.currentSelect.setInfo = {};
					that.currentSelect.setInfo.nodeCode = that.currentSelect.name;
					that.currentSelect.setInfo.nodeName = that.currentSelect.name;
				}
				if (!that.currentSelect.setInfo.nodeDesignate) {
					that.currentSelect.setInfo.nodeDesignate = 'ALL_USER';
				}
				if (!that.currentSelect.setInfo.nodeRejectType) {
					that.currentSelect.setInfo.nodeRejectType = '1';
				}
				if (!that.currentSelect.setInfo.nodeConfluenceType) {
					that.currentSelect.setInfo.nodeConfluenceType = 'all';
				}
				if (that.currentSelect.setInfo.nodeDesignate == 'SPECIAL_USER' || that.currentSelect.setInfo.nodeDesignate == 'SPECIAL_ROLE') {
					that.specialShow = true;
					that.specialName = that.currentSelect.setInfo.nodeDesignateName;
					that.currentDepart = that.currentSelect.setInfo.currentDepart;
				}
				that.setInfo = that.currentSelect.setInfo;
			}
		}
	}
);

watch(
	() => that.currentSelect,
	(val) => {
		emits('updateSelect', val),
			{
				deep: true,
			};
	}
);
</script>

<style lang="scss" scoped>
@import '../style/flow-attr.scss';
</style>
